<template>
  <div class="home">
    <table border="1px ">
      <tr>
        <td>ID</td>
        <td>名称</td>
        <td>图片</td>
        <td>价格</td>
        <td>库存</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in teasData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>
          <img :src="item.img" class="imgs" />
        </td>
        <td>{{ item.price }}</td>
        <td>{{ item.stock }}</td>
        <td>{{ item.status }}</td>
        <td>
          <el-button type="success" :icon="Tickets" circle />
          <el-button type="primary" :icon="Edit" circle />
          <el-button
            @click="del(item.id)"
            type="danger"
            :icon="Delete"
            circle
          />
        </td>
      </tr>
    </table>
  </div>

  <teleport to="body">
    <div class="mask" >
      <div class="popup">
        <h3>删除后数据无法恢复,确定删除吗?</h3>
        <div>
          <el-button type="primary">确定</el-button>
          <el-button type="info">取消</el-button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts" setup>
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Tickets,
} from "@element-plus/icons-vue";
import { defineComponent, onBeforeMount, ref } from "vue";
import { getCode } from "@/utils/https";

let teasData = ref();
let tea = ref();
onBeforeMount(() => {
  let isShow = ref(false)
  getCode()
    .then((res) => {
      tea.value = res;
      console.log(tea.value.data);
      teasData.value = tea.value.data;
    })
    .catch((err) => {
      console.error(err);
    });
});
// function del(gid) {

// }
</script>

<style>
.imgs {
  width: 150px;
  height: 90px;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(116, 116, 116, 0.445);
}
.popup {
  width: 300px;
  height: 150px;
  background-color: aqua;
  text-align: center;
  padding-top: 50px;
  position: absolute;
  top: 30%;
  left: calc((100% - 300px) / 2);
  z-index: 1;
}
</style>
